<template>
    <div class="recommend">

        <Scroll ref="scroll" :data="discList" >
            <div>
                <!--当 recommends 有数据的时候渲染-->
                <div class="slider-wrapper" v-if="recommends.length">
                    <Slider>
                        <div v-for="item in recommends">
                            <a :href="item.linkUrl">
                                <img class="needsclick" :src="item.picUrl" alt=""/>
                            </a>
                        </div>

                    </Slider>
                </div>
                <div class="content-wrapper">
                    <span>热门歌单推荐</span>
                    <ul>
                        <li class="item-content"  v-for="item in discList">
                            <div class="icon">
                                <img v-lazy="item.imgurl" @load="imageOnLoad" alt=""/>
                            </div>
                            <div class="music_desc">
                                <h2 class="title" v-html="item.creator.name"></h2>

                                <p class="desc" v-html="item.dissname"></p>

                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </Scroll>

        <div class="loading-content" v-show="!discList.length">
            <Loading></Loading>
        </div>

    </div>
</template>

<script type="es6">
    import Slider from 'base/slider/slider'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'
    import {getRecommend,getDiscList} from 'api/recommend.js'
    import {ERR_OK} from 'api/config.js'

    //getRecommend()
    //created()

    export default{
        components: {
            Slider,
            Scroll,
            Loading
        },
        data(){
            return {
                recommends: [],
                discList: [],
                checkLoad:false
            }
        },
        created(){
          this._getRecommend()
          this._getDiscList()
            setTimeout(()=>{

            },2000)

        },
        methods: {
            _getRecommend(){
                getRecommend().then((res)=> {
                    // console.log("has get res");
                    if (res.code === ERR_OK) {
                        //console.log(res.data.slider)
                        this.recommends = res.data.slider;
                    }
                })
            },

            _getDiscList(){
                getDiscList().then((res)=> {
                    this.discList = res.data.list;
                    console.log(this.discList)
                })
            },
            imageOnLoad(){
                if(!this.checkLoad){
                    this.$refs.scroll.refresh();
                    this.checkLoad=true;
                }

            }
        }
    }

    console.log('this is recommend');

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable.styl"
    @import "recommend.styl";

</style>
